<template>
    <aside :step="step">
        <ul>
            <li>
                <div class="shadow-a">
                    <img style="width:50px;" src="../assets/step1.png">
                    <span class="txt">Create a profile and choose position(s) to apply for</span>
                </div>
            </li>
            <li>
                <div class="shadow-a">
                    <img style="width:50px;" src="../assets/step2.png">
                    <span class="txt">Complete the skills and personality assessments</span>
                </div>
            </li>
            <li>
                <div class="shadow-a">
                    <img style="width:50px;" src="../assets/step3.png">
                    <span class="txt"><br>Initiate the interview process</span>
                </div>
            </li>
            <li>
                <div class="shadow-a">
                    <img style="width:50px;" src="../assets/step4.png">
                    <span class="txt">Lay the groundwork for onboarding</span>
                </div>
            </li>
            <li>
                <div class="shadow-a">
                    <img style="width:50px;" src="../assets/step5.png">
                    <span class="txt">Reach the finish line and meet your new team members</span>
                </div>
            </li>
            <div class="progress">
                <div class="progress-bg"></div>
                <div class="progress-ac" :style="{'height':((rangNum(step)-1)*125+'px')}"></div>
                <div :class="(Number(step)>=1&&Number(step)<=4)?'circle':'circleGray'" style="top:10px;">1</div>
                <div :class="(Number(step)>=2&&Number(step)<=4)?'circle':'circleGray'" style="top:135px;">2</div>
                <div :class="(Number(step)>=3&&Number(step)<=4)?'circle':'circleGray'" style="top:260px">3</div>
                <div :class="(Number(step)>=4&&Number(step)<=5)?'circle':'circleGray'" style="top:385px;">4</div>
                <div :class="step==5?'circle':'circleGray'" style="top:510px;">5</div>
            </div>
        </ul>
    </aside>
</template>
<script>
    export default {
        name: "Aside",
        props:{
            step:{
                type:String,
                default:'1'
            }
        },
        created() {
            // alert(document.documentElement.clientWidth)
            console.log('分辨率宽',document.documentElement.clientWidth)
        },
        computed:{
            rangNum(){
                return function (step) {
                    var res=0
                    res=step||1
                    if(res>4)res=4
                    return res
                }
            }
        }
    }
</script>
<style lang="less" scoped>
    aside{
        flex: 0 0 400px;
        width:400px;
        position:relative;
        margin-top:50px;
        ul{
            list-style:none;
            width:250px;
            margin:0 auto;
            li{
                height:125px;
                span{
                    display:inline-block;
                }
                .txt{
                    width:120px;
                    font-size: 14px;
                    float:right;
                    color: #bac5cc;
                }
            }
        }
        .progress{
            position:absolute;
            left:150px;
            top:0;
            .circle{
                width:30px;
                height:30px;
                line-height:30px;
                text-align:center;
                border-radius:15px;
                background:#2dc3e3;
                color:#fff;
                position:absolute;
            }
            .circleGray{
                width:30px;
                height:30px;
                line-height:30px;
                text-align:center;
                border-radius:15px;
                background:#f3f3f3;
                color:#fff;
                position:absolute;
            }
            .progress-bg{
                height:500px;
                background:#f3f3f3;
                width:6px;
                position:absolute;
                left:12px;
                top:20px;
            }
            .progress-ac{
                /*height:80px;*/
                background:#2dc3e3;
                width:6px;
                position:absolute;
                left:12px;
                top:20px;
            }
        }
    }
    @media screen and (max-width: 1440px){
        aside {
            flex: 0 0 320px;
            width: 320px;
            position: relative;
            margin-top: 40px;
            .progress{
                left:110px;
            }
        }
    }
    @media screen and (max-width: 1200px){
        aside{
            flex: 0 0 280px;
            width: 280px;
            margin-top: 40px;
            ul{
                li{
                    .txt{
                        font-size: 12px;
                        width: 100px;
                    }
                    img{
                        margin-left: 10px;
                    }
                }
            }
            .progress{
                .circle,circleGray{
                    width: 30px;
                    height: 30px;
                }
            }
        }

    }

</style>